<template>
    <div class="body_box">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryParams" :inline="true">
                <el-form-item label="" prop="query">
                    <el-input style="width: 370px;" v-model="queryParams.query" placeholder="请输入商户账号名称、店铺名称、联系手机号"
                        clearable />
                </el-form-item>
                <el-form-item label="邀请人：" prop="referrer">
                    <el-select v-model="queryParams.referrer" filterable placeholder="请选择" clearable
                        style="width: 190px">
                        <el-option v-for="dict in referrerList" :key="dict.referrer" :label="dict.name"
                            :value="dict.referrer" />
                    </el-select>
                </el-form-item>
                <el-form-item label="入驻状态：" prop="settledStatus">
                    <el-select v-model="queryParams.settledStatus" placeholder="请选择" clearable style="width: 190px">
                        <el-option v-for="dict in settledStatusList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="结算账户状态：" prop="settlementAccountStatus">
                    <el-select v-model="queryParams.settlementAccountStatus" placeholder="请选择" filterable clearable
                        style="width: 190px">
                        <el-option v-for="dict in settlementAccountStatusList" :key="dict.id" :label="dict.value"
                            :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：" prop="date">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery('queryParams')">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="main_top">
                <div class="lef"></div>
                <div class="listBox_head">
                    <export-excel-button title="入驻情况统计" action="/settlement/situation/export" :params="ExportParams" />
                </div>
            </div>
            <el-table ref="table" v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="商户账号名称" align="center" prop="merchantName" :show-overflow-tooltip="true" width="180" />
                <el-table-column label="店铺名称" align="center" prop="shopName" :show-overflow-tooltip="true" width="170" />
                <el-table-column label="联系手机号" align="center" prop="phone" :show-overflow-tooltip="true" width="120" />
                <el-table-column label="行业类型" align="center" prop="shopTypeName" :show-overflow-tooltip="true" />
                <el-table-column label="邀请人" align="center" prop="invitedName" :show-overflow-tooltip="true" />
                <el-table-column label="入驻状态" align="center" prop="settledStatusName" :show-overflow-tooltip="true" width="170" />
                <el-table-column label="结算账户状态" align="center" prop="settleAccountStatusName" :show-overflow-tooltip="true" />
                <el-table-column label="赚卡数量" align="center" prop="equityCardCount" :show-overflow-tooltip="true" />
                <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
    </div>
</template>
<script>
import {
    settlementInviterList,
    settlementList
} from "@/api/merchants/settlementStatistics";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
    name: "settlementStatistics",
    components: {
        ExportExcelButton,
    },
    data() {
        return {
            loading: false,
            total: 0,//状态字典数组
            referrerList: [],//邀请人列表
            //交易类型列表 1待入驻审核 2待签约 3完成入驻 4入驻驳回 5签约驳回 6已注销
            settledStatusList: [
                {id:'',value:'全部'},
                {id:1,value:'待入驻审核'},
                {id:2,value:'待签约'},
                {id:3,value:'完成入驻'},
                {id:4,value:'入驻驳回'},
                {id:5,value:'签约驳回'},
                {id:6,value:'已注销'},
            ],
            //结算账户状态 1已提交 2未提交
            settlementAccountStatusList: [
                {id:'',value:'全部'},
                {id:1,value:'已提交'},
                {id:2,value:'未提交'},
            ],
            //表格数据
            tabList: [],
            date: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                query: "", //卡查询
                referrer: '', //邀请人
                settledStatus: '', //入驻状态
                settlementAccountStatus: '', //结算账户状态
                beginDate: '', //开始时间
                endDate: '', //结束时间
            },

        }
    },
    computed: {
        ExportParams() {
            const params = {
                ...this.queryParams,
            };
            return params;
        },
    },
    created() {
        this.getSettlementInviterList()
        this.getList()
    },
    methods: {
        // 时间切换
        handleTime(e) {
            this.queryParams.beginDate = this.date[0]
            this.queryParams.endDate = this.date[1]
        },
        // 邀请人列表
        getSettlementInviterList(){
            settlementInviterList().then(res=>{
                var arr = [
                    { referrer: "", name: "全部" }
                ];
                this.referrerList = arr.concat(res.result)
            })
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            settlementList(this.queryParams).then((response) => {
                response.result.records.forEach(item => {
                    for (var key in item) {
                        if (item[key] === '') {
                            item[key] = "-";
                        }
                    }
                });
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery(formName) {
            //创建确定
            this.queryParams.pageNum = 1;
            this.getList();

        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                query: "", //卡查询
                referrer: '', //邀请人
                settledStatus: '', //入驻状态
                settlementAccountStatus: '', //结算账户状态
                beginDate: '', //开始时间
                endDate: '', //结束时间
            };
            // this.$refs["queryParams"].resetFields();
            this.date = []
            this.getList();
        },
    },
};

</script>
<style scoped scoped lang="scss">
::v-deep .el-table .DisableSelection .cell .el-checkbox__inner {
    display: none;
}

.body_box {
    padding: 20px;
}

.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    padding: 0 0 5px 0;
}

.el-dropdown {
    margin-left: 10px;
}

.main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;

    .lef {}
}
</style>
  